<template>
  <div class="header-title" :style="{backgroundColor:bgColor}">

      <div class="header">

        <div class="header-tit" :class="{logoW:isWhite}"><span>{{message}}</span></div>
        <div class="back-con" @click="back" :class="{listW:isWhite,closed:isNavigator}"></div>
      </div>
      <ul class="navigator-list" v-show="isNavigator">
        <li v-for="items in idxArray" :class="{activity:items.isOn}" @click="toPages(items.id,items.url)" >{{items.name}}</li>

      </ul>

  </div>
</template>

<script>
export default {
  name: 'headers',
  props:{
    message:{
        type:String
    },
    backText:{
        type:String
    },
    bgColor:{
        type:String
    },
    isWhite:{
      type:Boolean
    }
  },
  data () {
    return {
      msg: 'Welcome to Your Vue.js App',
      isNavigator:false,
      idxArray:[
        {
          name:"首页",
          id:1,
          url:"/",
          isOn:false

        },
        {
          name:"我的产品",
          id:2,
          url:"/product",
          isOn:false
        },
        {
          name:"产品体验",
          id:3,
          url:"/experience",
          isOn:false
        },
        {
          name:"关于我们",
          id:4,
          url:"/about",
          isOn:false
        },
        {
          name:"联系我们",
          id:5,
          url:"/contact",
          isOn:false
        }
      ]
    }
  },
  created(){
      this.getTimes("2018-04-30")
  },
  methods:{
    back(){
        let vm=this;
        vm.isNavigator=!vm.isNavigator;
        this.$emit("went");

    },
    toPages(id,url){
      let vm=this;
      vm.$router.push(url);
      vm.isNavigator=false;
      vm.idxArray.forEach((items,index) => {
        items.isOn=items.id==id ? true :false;
      })

    },
    getTimes(dates){
        var vm=this,
          _ends=new Date(dates).getTime(),
          _now=new Date().getTime();
        if((_ends-_now)<=0){
            vm.idxArray=[];
        }
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.header-title{
  position:fixed;
  width:100%;
  left:0;
  top:0;
  z-index: 10;
}

  div.header{
    display:-webkit-box;
    padding:.9rem .9rem 0 .9rem;
    height:2.14rem;
    line-height:2.14rem;
    font-size:.56rem;
  }
  .header-tit{
    width:1.42rem;
    height:2.14rem;
    background:url(../assets/images/logot.png);
    background-size:1.42rem 2.14rem;
    text-align:left;
    color:#333;
  }
.header-tit.logoW{
  background:url(../assets/images/logoW.png);
  background-size:1.42rem 2.14rem;
}

.navigator-list{
    position:absolute;
    width:4rem;
    right:0;
    margin-top:.4rem;
    background:#FFF;
    box-shadow:0 0 5px 2px rgba(0,0,0,.2);
    font-size:.56rem;

}
  .navigator-list li{

    padding:0 .6rem;
    line-height:1.52rem;
    tex-align:center;
  }
  .navigator-list li.activity{
    background:#dcdcdc;
  }
  .back-con{
    display: block;
    -webkit-box-flex: 1;
    height:1.12rem;
    background:url(../assets/images/listicon.png) no-repeat right;
    -webkit-transition: All 0.4s ease-in-out;
    background-size:1.36rem 1.12rem;
  }
.back-con.listW{
  height:1.2rem;
  background:url(../assets/images/listW.png) no-repeat right;
  background-size:1.4rem 1.2rem;
}
  .back-con.closed{
    width:1.36rem;
    height:1.12rem;
    background:url(../assets/images/close.png) no-repeat right;
    -webkit-transform: rotate(1deg);
    background-size:1.36rem 1.12rem;
  }
  .back-con.listW.closed{
    background:url(../assets/images/closeW.png) no-repeat right;
    background-size:1.4rem 1.2rem;
  }

</style>
